<template>
    <div class="main">
        <div class="main-header">
            <van-search v-model="value" placeholder="冬瓜汤" />
            <img class="member" src="../../assets/images/member_market.svg" alt="">
            <img class="notice" src="../../assets/images/notice.svg" alt="">
        </div>
        <div class="main-nav">
            <van-tabs v-model:active="active">
                <van-tab v-for="(item, index) in tabs" :key="index" :title="item">
                    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
                        <van-swipe-item><img
                                src="https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg"
                                alt=""></van-swipe-item>
                        <van-swipe-item><img
                                src="https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg"
                                alt=""></van-swipe-item>
                        <van-swipe-item><img
                                src="https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg"
                                alt=""></van-swipe-item>
                        <van-swipe-item><img
                                src="https://i1.douguo.com/upload/banner/1/c/0/1c723b7852d66dc25fa4907a417ef2b0.jpg"
                                alt=""></van-swipe-item>
                    </van-swipe>
                    <component :is="getComponentName(item)">
                    </component>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import HomeTab from '../../component/HomeTab.vue';

export default {
    components: { HomeTab },
    setup() {
        const value = ref('');
        const active = ref('');
        const tabs = ref([ '推荐','关注', '笔记', '视频', '活动', '母婴', '鲜味厨',]);
        function getComponentName(item) {
            switch (item) {
                case '推荐':
                    return 'HomeTab';
                default:
                    return '';
            }
        }
        return { value, active, tabs, getComponentName };
    },
};
</script>

<style lang="scss">
.main {
    .main-header {
        display: flex;
        align-items: center;
        justify-content: center;

        .van-search {
            width: 300px;
        }

        .member {
            margin-right: 5px;
        }

        >img {
            opacity: 0.5;
            height: 28px;
        }

    }

    .main-nav {
        .my-swipe {
            margin-top: 10px;

            .van-swipe-item {
                color: #fff;
                font-size: 20px;
                text-align: center;
                width: 375px;
                height: 120px;

                >img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }


}
</style>